<template>
    <div class="tableBox">
        <h2>表格测试：</h2>
        <Table
            :tableD="tableD"
            :selection="true"
            @selection-change = "onSelectionChange"
        >
            <template v-slot:cz="item" >
                <el-button @click="handleEdit(item.row)">编辑</el-button>
            </template>
        </Table>
    </div>
</template>

<script>
import Table from "@/components/table/Table";
export default {
    name: "Table1",
    data () {
        return {
            tableD:{
                page:{
                    Count: 16,
                    PageIndex: 2,
                    PageSize: 10
                },
                columns:[
                    {
                        title: "序号",
                        type: 'index',
                        width: 50
                    },
                    {
                        title: "姓名",
                        key: 'xm',
                        width: 100
                    },
                    {
                        title: "证件类型",
                        key: 'zjlx',
                        width: 100
                    },
                    {
                        title: "证件号码",
                        key: 'zjhm',
                        width: 200
                    },
                    {
                        title: "操作",
                        slot: 'cz',
                    },
                ],
                datas:[
                    {
                        xh: '1',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                    {
                        xh: '2',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                    {
                        xh: '3',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                    {
                        xh: '4',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                    {
                        xh: '4',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                    {
                        xh: '4',
                        xm: '梁斯郎',
                        zjlx: '身份证',
                        zjhm: '888888888888888'
                    },
                ]
            }
        }
    },
    components: {
        Table
    },
    mounted () {

    },
    methods: {
        handleEdit(val) {
            console.log(val);
        },
        onSelectionChange(val){
            console.log(val);
        }
    },
}
</script>

<style lang="less" scoped>
.tableBox{
    background-color: #fff;
    padding: 10px;

    h2{
        margin: 10px;
    }
}

</style>